<style scoped>
.hoc-svg-wrapper {
	display: inline-flex;
	align-items: center;
}
.icon {
	cursor: pointer;
}
</style>

<template>
	<span class="hoc-svg-wrapper">
		<!-- 零宽度空格，用来对齐-->
		&#8203;
		<svg class="icon" :fill="fill" :stroke="stroke" :width="width + 'px'" :height="height + 'px'">
			<use :xlink:href="href"></use>
		</svg>
	</span>
</template>

<script>
	export default {
		props: {
			name: {
				type: String,
				required: true
			},
			width: {
				type: Number
			},
			height: {
				type: Number
			},
			fill: {
				type: String
			},
			stroke: {
				type: String
			}
		},

		name: 'hoc-svg',

		computed: {
			href() {
				return `#${this.name}`
			}
		}
	}
</script>